
import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
    Card, Button, Row, Col,
    Form, Checkbox, Space,
    message, Input, Radio, Modal,
} from 'antd';
import {
    PlusOutlined,
    ExclamationCircleOutlined,
} from '@ant-design/icons';
import { connect } from 'umi';
import request from '@/utils/request';
import { EmpSelect } from '@/components/FormItemSelect';
import OpMasterSelect from '@/components/OpMasterSelect';

const apiURL = "/api/services/app/OpMaster/";
const currentControl = "OpMaster"
const { confirm } = Modal;
class ViewPage extends React.Component<any, any> {
    constructor(props: Readonly<{}>) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            data: { id: 0 },
            dataSource: []
        }
    }
    formRef: any = React.createRef();
    onFinish = (values: any) => {
        var model = values.OpMaster
        this.setState({ loading: true });
        var act = "Modify";
        if (model.id == 0 || !model.id) {
            act = "New";
        }
        request(apiURL + act, {
            method: 'POST',
            data: model,
        }).then((response) => {
            if (response) {
                if (response.success) {
                    if (response.result.success) {
                        message.success('保存成功！');
                        this.setState({ record: response.result.data })
                    }
                }
                this.setState({ loading: false });
            }
        });
    }
    ResetForm = () => {
        this.formRef.current.resetFields()
        this.setState({ data: { id: 0 } })
    }
    getData = (e: any) => {
        if (e.opCode) {
            request(apiURL + 'GetList', {
                method: 'GET',
                params: { keywords: e.opCode },
            }).then((response: any) => {
                if (response.success) {
                    var data = response.result.items[0]
                    if (data) {
                        this.formRef.current.setFieldsValue({ OpMaster: data });
                        this.setState({ data })
                    }
                }
            });
        }
    }
    delObj = () => {
        const { data } = this.state
        let _this = this
        confirm({
            title: '警告',
            icon: <ExclamationCircleOutlined />,
            content: '删除后将不可恢复，确定删除？',
            onOk() {
                _this.props.dispatch({
                    type: 'Abp/delete',
                    payload: { id: data.id },
                    control: currentControl
                }).then(() => {
                    _this.formRef.current.resetFields()
                    _this.setState({ data: { id: 0 } })
                })
            },
        });
    }
    render() {
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        const { data } = this.state
        return (
            <PageHeaderWrapper title={false}>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <Card title="工序维护" extra={[<Space key='s1'>
                        <Button type="primary" icon={<PlusOutlined />} onClick={this.ResetForm}>新建</Button>
                        <Button type="primary" htmlType="submit" loading={this.state.loading}>保存</Button>
                        <Button danger onClick={this.delObj} disabled={data.id === 0}>删除</Button>
                    </Space>]}>
                        <Row gutter={[16, 16]}>
                            <Col span={12}>
                                <Form.Item label="ID" name={['OpMaster', 'id']} style={{ display: 'none' }}>
                                    <Input />
                                </Form.Item>
                                <Form.Item label="工序代号">
                                    <Input.Group compact>
                                        <OpMasterSelect
                                            width={200}
                                            noStyle
                                            name={['OpMaster', 'opCode']}
                                            setCurrent={this.getData}
                                            rules={[{ required: true, message: "工序代号必填" }]} />
                                    </Input.Group>
                                </Form.Item>
                                <Form.Item label="描述" rules={[{ required: true, message: "工序描述必填" }]} name={['OpMaster', 'opDesc']}>
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    wrapperCol={{ offset: 5 }}
                                    name={['OpMaster', 'subcontract']}
                                    valuePropName="checked">
                                    <Checkbox>外包</Checkbox>
                                </Form.Item>
                                <Form.Item
                                    name={['OpMaster', 'opType']}
                                    label="类型"
                                    rules={[{ required: true, message: "请选择类型" }]}>
                                    <Radio.Group name="radiogroup">
                                        <Radio value="M">生产</Radio>
                                        <Radio value="S">服务</Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <EmpSelect showSearch width={200} name={['OpMaster', 'buyerID']} label="采购员" />
                                <Form.Item
                                    label="备注"
                                    name={['OpMaster', 'commentText']} >
                                    <Input.TextArea rows={5} />
                                </Form.Item>

                            </Col>
                            <Col span={12}>
                            </Col>
                        </Row>
                    </Card>
                </Form>
            </PageHeaderWrapper>
        )
    }
}
export default connect(({ Abp,user }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: user.currentUser,
}))(ViewPage);